<template>
	<uni-forms-item label="下拉选项" name="options" required>
		<view class="options_box" v-for="(option, index) in formData.options || []" :key="index"
			:class="index + 1 < formData.options.length ? 'mb_20' : ''">
			<uni-easyinput v-model="formData.options[index]" type="text" placeholder="请输入下拉选项值" :disabled="disabled"
				:cursorSpacing="20" />
			<image v-if="index === formData.options.length - 1 && !disabled" class="options_box_add"
				src="@/static/add_icon.png" @click="handleChangeOption('add')" />
			<image v-if="formData.options.length > 1 && !disabled" class="options_box_del" src="@/static/del_icon.png"
				@click="handleChangeOption('del', index)" />
		</view>
	</uni-forms-item>
	<uni-forms-item label="可选最大条数" name="maxLength">
		<uni-easyinput v-model="formData.maxLength" type="number" :disabled="disabled"
			placeholder="不填则默认不限制"></uni-easyinput>
	</uni-forms-item>
	<uni-forms-item label="默认值" name="defaultVal">
		<cl-more-select-picker v-model="formData.defaultVal" :options="formData.options" :maxLength="formData.maxLength"
			:disabled="disabled"></cl-more-select-picker>
	</uni-forms-item>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		disabled: Boolean
	})
	const formData = defineModel()
	// 新增下拉
	const handleChangeOption = (type, index) => {
		if (type === 'add') {
			formData.value.options.push('下拉选项')
		} else {
			formData.value.options.splice(index, 1)
		}
		formData.value.defaultVal = []
	}
</script>

<style scoped lang="scss">
	.options_box {
		display: flex;
		align-items: center;

		&_add,
		&_del {
			margin-left: 10rpx;
			width: 56rpx;
			height: 56rpx;
			cursor: pointer;
		}
	}
</style>